<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>海绵宝宝主题网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            background: url("C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\全景图.jpg") no-repeat center center fixed; /* 设置大合照为背景 */
            background-size: cover; /* 确保背景图片覆盖整个视窗 */
        }
        header, .content, footer {
            background-color: rgba(255, 255, 255, 0.8); /* 半透明背景色，以便文字更易读 */
            border-radius: 10px;
            padding: 20px;
            margin: 20px auto;
            width: 80%;
            max-width: 1200px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 添加阴影以增强对比度 */
        }
        header {
            margin-top: 50px; /* 增加顶部间距 */
        }
        .character {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .character img {
            width: 150px; /* 固定宽度 */
            height: 150px; /* 固定高度 */
            object-fit: cover; /* 确保图片不会变形 */
            margin-right: 20px;
            border: 2px solid #333; /* 加深边框颜色，增强对比度 */
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 添加阴影以增强对比度 */
        }
        footer {
            position: relative; /* 将footer定位为相对位置 */
            bottom: auto;
            width: 80%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<header>
    <h1>欢迎来到海绵宝宝的世界！</h1>
</header>
<div class="content">
    <section>
        <h2>海绵宝宝简介</h2>
        <p>海绵宝宝是方块形的黄色海绵，住在比基尼海滩（裤头村、比奇堡）的一个菠萝里，他的宠物是一只会“猫~猫~”叫的海蜗牛小蜗，海绵宝宝喜欢捕捉水母，职业是蟹堡王（The Krusty Krab）里的头号厨师。派大星和珊迪都是他的朋友。海绵宝宝总是能给平静的世界制造麻烦，虽然闹出一些笑话，不过他总能摆脱困境，然后又制造出新的麻烦。</p>
    </section>
    <section>
        <h2>主要人物介绍</h2>
        <div>
            <img src="C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\海绵宝宝.jpg" alt="海绵宝宝">
            <p><strong>海绵宝宝：</strong>黄色长方形海绵，其身体构成如同清洁用海绵。生日是1986年7月14日。两只手各拥有四根手指。以棕色短裤、白色衬衫和红色领带为主要服装。具有不死之身，即使身体如何被破坏皆可恢复原状。虽然有正常进食，但纯滤食海水也能继续存活。体力薄弱，且所谓的哑铃两端其实是绒毛玩具。</p>
        </div>
<div>
            <img src="C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\pdx.jpeg" alt="派大星">
            <p><strong>派大星：</strong>粉红色的海星。智商极低，头脑与身体仅使用插头连结。做什么事都会搞砸，但开船却异常厉害，居住在圆顶石头底下。懒惰并相当孩子气，时常在无意间呆滞的流口水，且讨厌洗澡、也不爱洗手、偏爱睡觉。兴趣是看电视。跟海绵宝宝的交情最好；并时常鼓励海绵宝宝做出一些危险行动，往往让彼此陷入困境。</p>
        </div>
<div>
            <img src="C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\zyg.jpg" alt="章鱼哥">
            <p><strong>章鱼哥：</strong>大鼻子章鱼，容易愤怒且势利眼，相当自恋，自以为拥有艺术才能。目前是光头，但曾有过黄色长卷发。居住在一栋仿复活节岛人像的房屋。担任"蟹堡王"的柜台人员，但并不喜欢自己的工作，喜欢吹奏竖笛及采用多种风格画自画像。讨厌海绵宝宝和派大星，偶尔会对海绵宝宝表达认同，但通常是对他自己有利的时候。</p>
        </div>
<div>
            <img src="C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\xlb.jpg" alt="蟹老板">
            <p><strong>蟹老板：</strong>红色螃蟹，本名尤金蟹。视金钱如生命，经常为了一块钱而去冒生命危险，极为自私。快餐店“蟹堡王”的经营者，多次向员工宣导要有时间观念，因为"时间就是金钱"。只要发现能发快财的产品，就会忽视老本蟹黄堡并转换目标。营业时间常在办公室看报纸、数钱、洗金钱浴等，喜欢看讽刺戏剧，和痞老板是死对头。</p>
        </div>
<div>
            <img src="C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\cz.jpg" alt="痞老板">
            <p><strong>痞老板：</strong>蟹老板的死对头，《海绵宝宝》的主要反派角色。由1%的邪恶和99%的热毒气组成。只有一只眼睛，时常刺痛（因为他忘记眨眼）。快餐店“海之霸”的老板。管一台取名为凯伦的电脑叫妻子。为了让自己的餐厅生意兴隆，一直偷取蟹堡王著名料理“蟹黄堡”的秘密配方，却从未成功，最大的希望是统治全世界。</p>
        </div>
<div>
            <img src="C:\Users\xi'yu\Desktop\SpongeBobWebsiteimages\mq.jpg"alt="珊迪">
            <p><strong>珊迪：</strong>来自德克萨斯州的雌性松鼠，身兼科学家、探险家和发明家。热爱运动（尤其空手道和滑沙）和科学，也是牛仔竞技的冠军。由于松鼠属於陆地生物，需要呼吸空气，在海底须穿著太空衣和头盔。平常居住在大型圆形强化玻璃防护罩下的海底树屋，内部环境与陆地相同，且可以季节轮替；若海洋生物入内须配戴装水的头盔。</p>
        </div>

           </section>
    <section>
        <h2>角色居所</h2>
        <p>菠萝屋（凤梨屋）：海绵宝宝和小蜗的家，是从某一艘船上掉落的菠萝（凤梨）。</p>
 <p>复活岛人像屋:章鱼哥的家，位于海绵宝宝家和派大星家之间，外型为深蓝色复活节岛人像。</p>
 <p>石头屋:派大星的家，位于章鱼哥家隔壁。外型为红棕色半圆体石头，里面的家具摆设由沙子堆成。</p>
 <p>圆顶树屋:珊迪的家，里面充满空气，外型以玻璃制成。海洋生物进入常需戴上装水头盔。</p>
 <p>船锚屋:蟹老板和珍珍的家，外型为深蓝色船锚。</p>
 <p>海之霸：痞老板的餐厅和住所，外观是一个水桶的模样，餐点恶心又不卫生，几乎没有客人上门。</p>

            </section>
</div>
<footer>
    <p>版权所有 © 2025 海绵宝宝粉丝团</p>
</footer>
</body>
</html>